<template>
  <div id="card">
    <el-row>
      <el-col :span="5" style="text-align: center">
        <el-tooltip content="复位">
          <el-button class="iconfont el-icon-aim" type="text" color="black" @click.native="handleReset" />
        </el-tooltip>
      </el-col>
      <el-col :span="5" style="text-align: center">
        <el-tooltip content="图例">
          <el-popover placement="bottom" trigger="click">
            <img src="@/assets/images/tips.png" style="width:150px" alt="">
            <el-button slot="reference" type="text" class="el-icon-info" />
          </el-popover>
        </el-tooltip>
      </el-col>
      <el-col :span="5" style="text-align: center">
        <el-tooltip :content="isfull ? '退出全屏' : '全屏'">
          <el-button type="text" :class="isfull ? 'iconfont el-icon-tuichuquanping' : 'iconfont el-icon-quanping'" color="black" @click.native="handleChange" />
        </el-tooltip>
      </el-col>
      <el-col :span="5">
        <el-button @click="CheckDialog = true">盘点</el-button>
      </el-col>
    </el-row>
    <!-- <el-dialog title="提示" :visible.sync="CheckDialog" width="30%" >
      <span slot="footer" class="dialog-footer">
        <el-button @click="CheckDialog = false">取 消</el-button>
        <el-button type="primary" @click="CheckDialog = false">确 定</el-button>
      </span>
    </el-dialog> -->
  </div>
</template>

<script>
import Snap from "snapsvg-cjs";
import { zpd } from "snap.svg.zpd";
export default {
  name: "LocmapContainer",
  data() {
    return {
      isfull1: 50,
      isfull: false,
      temp: 1,
      //盘点弹窗
      CheckDialog:false,
    };
  },
  props: {},
  mounted() {
    // this.queryLocRowList();
    // console.log(document);
    let isFullscreen =
      document.fullscreenElement ||
      document.mozFullScreenElement ||
      document.webkitFullscreenElement ||
      document.fullScreen ||
      document.mozFullScreen ||
      document.webkitIsFullScreen;
    isFullscreen = !!isFullscreen;
    document.addEventListener("fullscreenchange", () => {
      this.isfull = !this.isfull;
    });
    document.addEventListener("mozfullscreenchange", () => {
      this.isfull = !this.isfull;
    });
    document.addEventListener("webkitfullscreenchange", () => {
      this.isfull = !this.isfull;
    });
    document.addEventListener("msfullscreenchange", () => {
      this.isfull = !this.isfull;
    });
  },
  methods: {
    // 复位
    handleReset() {
      const svg = Snap("#svg");
      svg.zpd(function (_err, paper2) {
        svg.zoomTo(1, 1, mina.linear, function (_err, paper3) {
          svg.panTo(0, 0);
        });
      });
    },
    handleFullscreen() {
      const main = document.getElementById("snap-svg");
      if (this.isfull) {
        if (document.exitFullscreen) {
          document.exitFullscreen();
        } else if (document.mozCancelFullScreen) {
          document.mozCancelFullScreen();
        } else if (document.webkitCancelFullScreen) {
          document.webkitCancelFullScreen();
        } else if (document.msExitFullscreen) {
          document.msExitFullscreen();
        }
      } else {
        console.log(main.requestFullscreen);
        if (main.requestFullscreen) {
          main.requestFullscreen();
        } else if (main.mozRequestFullScreen) {
          main.mozRequestFullScreen();
        } else if (main.webkitRequestFullScreen) {
          main.webkitRequestFullScreen();
        } else if (main.msRequestFullscreen) {
          main.msRequestFullscreen();
        }
      }
    },
    handleChange() {
      this.handleFullscreen();
    },
    reduce() {
      this.isfull1 -= 1;
    },
  },
};
</script>

<style>
#card {
  box-shadow: 0 4px 8px 0 #454545;
  background: #fff;
  padding: 6px 6px;
  border-radius: 8px;
  /* position: absolute;
  bottom: 12px; */
  z-index: 999;
  width: 260px;
  position: fixed;
  left: 45%;
  bottom: 10px;
  /* height: 40px; */
}
.demo-svg {
  float: left;
  width: 68px;
  height: 48px;
  /* border-radius: 6px; */
  display: inline-block;
}
.h3NewStyle {
  float: left;
  font-size: 12px;
  color: #2f3033;
  font-weight: 500;
  margin: 0px;
}
.description {
  margin-top: -6px;
  font-size: 12px;
  transform: scale(0.9);
  color: #7e7f8c;
}
</style>
